<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>模块导入</title>
    <link rel="stylesheet" href="../../statics/common/cascader/cascader/cascader.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../statics/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../statics/common/layui/css/autocomplete.css">
    <link rel="stylesheet" type="text/css" href="../../statics/common/layui/css/soulTable.css">
    <link rel="stylesheet" type="text/css" href="../../statics/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../statics/css/fileImport.css">

</head>
<body>
<div id="app">
    <div class="module-page">
        <div class="module-tab">
            <div class="tab-title">快速导入入口</div>
            <ul class="tab-ul">
                <li class="tab-item" :class="currentTab==index?'tabActive':''" @click="tabChange(index)"
                    v-for="(item,index) in tab">{{item}}
                </li>
            </ul>
        </div>
        <div class="module-main" v-if="status!=5">
            <div class="import—tab border-top">
                <span class="import—tab-item uploading-item">上传文件</span>
                <span class="import—tab-item import-item">导入数据</span>
            </div>

            <keep-alive>
                <component :is="currentTabComponent" :status="status" :import-url="importUrl" :current-tab="currentTab" @change-status="changeStatus"
                :progress="progress"></component>
            </keep-alive>
        </div>
        <div title="上传" v-if="status==5">
            <import-upload :import-url="importUrl"></import-upload>
        </div>
    </div>
</div>


<div class="layui-form ren-form" v-show="importTypeSelect" id="importTypeSelect" style="display: none;">
    <div class="layui-form-item" style="margin-top: 10px">
        <label class="layui-form-label">导入文件：</label>
        <div class="layui-input-block" id="importFileBlock"></div>
    </div>
    <div class="layui-input-block" style="left: 6%;width: 30%;margin-top: 70px;" id="selectedImportBtnBlock"></div>
</div>


</body>
<script type="text/javascript" src="../../statics/plugins/jquery.min.js"></script>
<script src="../../statics/js/modules/import/vue.min.js?_${.now?long}"></script>
<script type="text/javascript" src="../../statics/common/layui/layui.all.js"></script>
<script src="../../statics/js/modules/element-ui/index.js"></script>
<script type="text/javascript" src="../../statics/js/common.js"></script>
<script type="text/javascript" src="../../statics/js/upload.js"></script>
<script src="../../statics/js/modules/import/import.js?_${.now?long}"></script>

<script type="text/javascript">

    new Vue({
        el: '#app',
        data() {
            return {
                tab: ['导入车辆信息', '导入车辆订单信息', '导入客户信息','导入车辆保险信息','导入车辆年检信息','导入车辆保养信息','导入车辆出险信息',
                    '导入车辆维修信息','导入车辆行驶证'],
                currentTab: 0,
                status: 1, // {1上传，2进度，3失败,4成功,5上传zip}
                importUrl:`../../../`,
                currentTabComponent:'import-download',
                progress:0,
            }
        },

        mounted(){
            console.log(this.importUrl,this.currentTabComponent);
        },
        methods: {
            tabChange(index) {
                this.currentTab = index;
                if(this.currentTab == 8){
                    this.status = 5;
                    this.currentTabComponent = 'import-upload';
                } else {
                    this.status = 1;
                    this.currentTabComponent = 'import-download';
                }

            },
            changeStatus(data){
                this.status = data.status;
                this.currentTabComponent = data.currentTabComponent;
                if(data.progress){
                    this.progress = data.progress;
                }
            }
        },
    })
</script>